<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
  class MyComponent extends React.Component{
      constructor(){
          super()
          console.log('初始化数据:constructor')
      }
      state={
          a:'我是a'
      }
    componentWillMount(){
          console.log('我将要被挂载了')
      }
      componentDidMount(){
          console.log('页面加载完成')
      }
      componentWillUnmount(){
        console.log('我将要被卸载了')
      }
      shouldComponentUpdate(){
          console.log('我是否要被更新(取决于我的返回值)')
          return true
      }
      componentWillUpdate(){
          console.log('组件将要被更新了')
      }
      delete=()=>{
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
          console.log('组件卸载完成')
      }
      force=()=>{
          this.state.a='我被强制更新了'
          this.forceUpdate()
      }
      set=()=>{
          this.setState({a:'set'})
      }
      render(){
          console.log('render')
          return(
              <div>组件mycompopnent
                <button onClick={this.delete}>卸载组件</button>
                <button onClick={this.force}>强制更新数据</button>
                <button onClick={this.set}>组件通过setstate来更新</button>
                <A/>
                </div>
          )
      }
  }
  class A extends React.Component{
      state={
          b:'我是b'
      }
          update=()=>{
              this.setState({b:'我被更新了'})
          }
      render(){
          return(
              <div>组件a
                <B msg={this}/>
                <button onClick={this.update}>更新b的值并重新传递</button>
                </div>
          )
      }
  }
  class B extends React.Component{
      componentWillReceiveProps(){
          console.log('我重新接受了父组件的值')
      }
      render(){
          return(
              <div>组件b</div>
          )
      }
  }
     ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        </script>
</body>
</html>